<template>
<div class="app-container">
     <el-card>
        <div slot="header" class="clearfix">
                <span>搜索条件</span>
        </div>
        <div class="filter-container">
            <div style="display:flex;align-items:center">
                <p style="font-size:14px;margin-right:10px">创建时间</p>
                <el-button :type="data == item.value ? 'primary' : ''" v-for="item in dataList" :key="item.name" @click="setData(item)" size="mini">{{item.name}}</el-button>
                <el-button size="mini" ref="time"   @click="setData({value:'zd',is_zd:true})" :type="data == 'zd'? 'primary' : ''">自定义</el-button>
                <el-date-picker 
                    v-model="data"
                    style="margin-left:10px"
                    v-show="showtime==true"
                    type="daterange"
                    size="mini"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                 </el-date-picker>
            </div>
            <div style="margin-top:25px">
                 <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="search">
                {{ '搜索' }}
            </el-button>
              <el-button v-waves  class="filter-item" type="info" icon="el-icon-refresh-left" size="mini" @click="refresh">
                {{ '重置' }}
            </el-button>
            </div>
            
        </div>
     </el-card>
     <el-row :gutter="20" style="margin-top:20px;font-size:14px">
        <el-col :span="6" v-for="item in badge" :key="item.name">
            <el-card class="box-card">
                <div slot="header">
                    <span>{{item.name}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{item.field}}</el-button>
                </div>
                <div>
                     <span>{{item.count}}</span>
                     <p v-if="item.content!=undefined"  style="display:flex;justify-content:space-between">
                        {{item.content}}
                        <span>{{item.sum}}<i :class="item.class"></i></span>
                    </p>
                </div>
              
            </el-card>
    </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="14">
                 <el-card style="margin-top:20px">
                    <div slot="header" class="clearfix">
                            <span>图表展示</span>
                    </div>
                    <div class="filter-container" ref="echarts_list" style="width:100%;height:450px">
                        
                    </div>
                </el-card>  
        </el-col>
        <el-col :span="10">
            <el-card style="margin-top:20px">
                    <div slot="header" class="clearfix">
                            <span>总佣金排名</span>
                    </div>
                    <div class="filter-container" style="width:100%;height:500px">
                        <el-table :data="pointList" stripe :size="'small'">
                        <el-table-column
                            type="index"
                            :index="indexMethod"
                            label="排名"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="name"
                            label="昵称"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="mobile"
                            label="手机号"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="extract_price"
                            label="佣金"
                            >
                        </el-table-column>
                    </el-table>
                    
                    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getCommissionList" />
                    </div>
                </el-card>  
        </el-col>
    </el-row>
      
</div>
 
</template>

<script>
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import * as echarts from 'echarts'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {getCommissionList,getCommissonCount,getRebateBadge,getUserBillBrokerage} from '@/api/record' // api接口
require('echarts/theme/macarons') // echarts theme
export default{
    name: 'chart_order',
     directives: { waves, permission }, // 引入指令
             components: { Pagination},
    data() {
        return {
               option: {},
                badge:[],
                pointList:[],
                monthList:[],
                storeList : [],
                store_id:'',
                dataList: [
                    {name: '全部', value: ''},
                    {name: '今天', value: 'today'},
                    {name: '本周', value: 'week'},
                    {name: '本月', value: 'month'},
                    {name: '本季度', value: 'quarter'},
                    {name: '本年', value: 'year'},
                ],
                data: '',
                myChart: {},
                count:0,
                limit:10,
                page:1,
                total:0,
                showtime: false,
                monthcount:0,
                count:0
        }
    },
    methods:{
        indexMethod(index) {
            return this.page==1 ? index+1:(index+1)+(this.page-1)*this.limit;
        },
        search:function(){
            this.getEchartsData();
            this.getbadge();
            this.getCommissionList();
            this.getCommissionCount();
        },
        refresh:function () {
            this.data='';
            this.getEchartsData();
        },
        getEchartsData:function(){
            var that  = this;
                getUserBillBrokerage({data:this.data}).then((rem)=>{
                    var option=that.setfenbuoption(rem.data.listdata,rem.data.legdata,rem.data.dataZoom);
                    that.myChart.list.setOption(option);
                });  
        },
    getCommissionList:function (){
                    var that=this;
                    getCommissionList({data:this.data,page:that.page,limit:that.limit}).then((res)=>{
                        that.pointList=res.data.list;
                        that.total    = res.data.total;
                      
                    })
                },
    getCommissionCount:function(){
                    var that = this;
                    getCommissonCount({data:this.data}).then((rem)=>{
                          that.count=rem.data
                    })
                },
        getbadge:function(){
                var that=this;
                getRebateBadge({data:this.data}).then((res)=>{
                    that.badge=res.data;
                })
        },
      setfenbuoption:function(seriesdata,xdata,dataZoom){
                     this.option={
                        title: {text:'返佣金额柱状图表',subtext:"时间段内的返佣金额"},
                        tooltip: {trigger: 'axis'},
                        toolbox: {show : true,},
                        xAxis : [{type : 'category', data :xdata,}],
                        yAxis : [{type : 'value'}],
                        series:[{type:'bar',data:seriesdata,markPoint :{
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            itemStyle:{
                                color:'#81BCFF'
                            }
                        }
                        ],
                    };
                    if(dataZoom!=''){
                        this.option.dataZoom=[{startValue:dataZoom},{type:'inside'}];
                    }
                    return  this.option;
            },

         setData:function(item){
                    var that=this;
                    if(item.is_zd==true){
                        that.showtime=true;
                        this.data=this.$refs.date_time.innerText;
                    }else{
                        this.showtime=false;
                        this.data=item.value;
                    }
                },
         checkPermission, // 权限判断函数
         setChart:function(name,myChartname){
            this.myChart[myChartname]=echarts.init(name);
        },
        
    },
      mounted:function () {
        var that = this;
        that.setChart(that.$refs.echarts_list,'list');
        that.getEchartsData();
        that.getbadge();
        that.getCommissionList();
        that.getCommissionCount();
    }
}

</script>
